<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI日常管理助手</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="frontend/css/main.css" as="style">
    <link rel="preload" href="frontend/index.js" as="script">
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="frontend/css/main.css">
    
    <!-- 图标 -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
    
    <!-- 主题色 -->
    <meta name="theme-color" content="#4a6cf7">
    
    <!-- 应用描述 -->
    <meta name="description" content="AI日常管理助手 - 智能任务和笔记管理工具">
</head>
<body>
    <!-- 应用容器 -->
    <div class="app-container">
        <!-- 应用头部 -->
        <header class="app-header">
            <nav class="nav-container">
                <a href="#" class="nav-brand">AI日常管理助手</a>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#dashboard" class="nav-link active" data-view="dashboard">仪表板</a>
                    </li>
                    <li class="nav-item">
                        <a href="#tasks" class="nav-link" data-view="tasks">任务</a>
                    </li>
                    <li class="nav-item">
                        <a href="#notes" class="nav-link" data-view="notes">笔记</a>
                    </li>
                    <li class="nav-item">
                        <a href="#settings" class="nav-link" data-view="settings">设置</a>
                    </li>
                </ul>
                <div class="status-indicators">
                    <div id="network-status" class="status-indicator">
                        <span class="status-dot"></span>
                        <span class="status-text">检查中...</span>
                    </div>
                    <div id="sync-status" class="status-indicator">
                        <span class="status-dot"></span>
                        <span class="status-text"></span>
                    </div>
                    <div id="migration-status" class="status-indicator">
                        <span class="status-dot"></span>
                        <span class="status-text"></span>
                    </div>
                </div>
            </nav>
        </header>
        
        <!-- 应用内容 -->
        <main class="app-content">
            <div class="page-container" id="page-container">
                <!-- 页面内容将由JavaScript动态加载 -->
                <div class="loading-placeholder">
                    <div class="spinner"></div>
                    <p>正在加载应用...</p>
                </div>
            </div>
        </main>
        
        <!-- 应用底部 -->
        <footer class="app-footer">
            <p>&copy; 2023 AI日常管理助手. 版权所有.</p>
        </footer>
    </div>
    
    <!-- 加载指示器 -->
    <div class="loading-indicator" id="loading-indicator">
        <div class="spinner"></div>
    </div>
    
    <!-- 通知容器 -->
    <div class="notification-container" id="notification-container"></div>
    
    <!-- 不支持JavaScript的回退内容 -->
    <noscript>
        <div class="noscript-container">
            <div class="noscript-message">
                <h2>需要启用JavaScript</h2>
                <p>此应用需要JavaScript才能正常运行，请在浏览器设置中启用JavaScript。</p>
            </div>
        </div>
        <style>
            .noscript-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #f8f9fa;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
            
            .noscript-message {
                background-color: white;
                border: 1px solid #dee2e6;
                border-radius: 0.375rem;
                padding: 2rem;
                max-width: 500px;
                text-align: center;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            }
            
            .noscript-message h2 {
                color: #dc3545;
                margin-top: 0;
            }
            
            .app-container {
                display: none;
            }
        </style>
    </noscript>
    
    <!-- 模块加载脚本 -->
    <script type="module" src="frontend/index.js"></script>
    
    <!-- 传统浏览器回退脚本 -->
    <script nomodule>
        document.addEventListener('DOMContentLoaded', function() {
            const container = document.querySelector('.app-container');
            if (container) {
                container.innerHTML = `
                    <div class="error-container">
                        <div class="error-message">
                            <h2>浏览器不支持ES6模块</h2>
                            <p>您的浏览器不支持ES6模块，请使用现代浏览器或启用ES6模块支持。</p>
                            <p>推荐使用最新版本的Chrome、Firefox、Safari或Edge浏览器。</p>
                        </div>
                    </div>
                `;
            }
        });
    </script>
    
    <!-- 性能监控脚本 -->
    <script>
        // 监控页面加载性能
        window.addEventListener('load', function() {
            if ('performance' in window) {
                const perfData = window.performance.timing;
                const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
                const domContentLoadedTime = perfData.domContentLoadedEventEnd - perfData.navigationStart;
                
                // 在开发环境中输出性能数据
                if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
                    console.log('页面加载性能数据:');
                    console.log('页面总加载时间:', pageLoadTime + 'ms');
                    console.log('DOM内容加载时间:', domContentLoadedTime + 'ms');
                }
            }
        });
        
        // 监控错误
        window.addEventListener('error', function(e) {
            console.error('页面错误:', e.error);
            
            // 在开发环境中显示错误详情
            if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
                const errorContainer = document.createElement('div');
                errorContainer.className = 'error-toast';
                errorContainer.innerHTML = `
                    <div class="error-toast-content">
                        <h4>JavaScript错误</h4>
                        <p>${e.error.message}</p>
                        <button id="dismiss-error">关闭</button>
                    </div>
                `;
                
                document.body.appendChild(errorContainer);
                
                // 添加关闭按钮事件
                document.getElementById('dismiss-error').addEventListener('click', function() {
                    errorContainer.remove();
                });
                
                // 5秒后自动关闭
                setTimeout(function() {
                    if (errorContainer.parentNode) {
                        errorContainer.remove();
                    }
                }, 5000);
            }
        });
    </script>
    
    <!-- 错误提示样式 -->
    <style>
        .loading-placeholder {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 50vh;
            color: var(--text-secondary);
        }
        
        .loading-placeholder .spinner {
            width: 2rem;
            height: 2rem;
            border: 0.25rem solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
            margin-bottom: var(--spacing-md);
        }
        
        .error-toast {
            position: fixed;
            bottom: var(--spacing-lg);
            left: var(--spacing-lg);
            right: var(--spacing-lg);
            background-color: var(--error-color);
            color: white;
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            z-index: 1050;
        }
        
        .error-toast-content h4 {
            margin-top: 0;
            margin-bottom: var(--spacing-sm);
        }
        
        .error-toast-content p {
            margin-bottom: var(--spacing-md);
        }
        
        .error-toast-content button {
            background-color: white;
            color: var(--error-color);
            border: none;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--border-radius);
            cursor: pointer;
        }
    </style>
</body>
</html>